<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相册列表</title>
</head>
<body>
    <div>
        <ul id="mycontainer">
            <li><a href=""><img src="" alt=""></a></li>
        </ul>
    </div>
    <a href="/">返回主页</a>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</body>
<script>
    function init() {
        $.get('/api/list',{},function (resp) {
            console.log(resp)
            let html = [];
            for (let i =0;i<resp.length;i++){
                html.push('<li><a href="detail?id='+resp[i].Id+'"><img src="'+resp[i].Path+'" alt="未发现"></a>备注:'+resp[i].Note+'<button onclick="drop('+resp[i].Id+')">删除</button></li>')
            }
            document.getElementById("mycontainer").innerHTML=html.join('')
        },'json')
    }
    init();
    function drop(id) {
        $.get('/api/delete',{id:id},function (resp) {
            if(resp==='删除成功'){
                init()
            }else{
                alert("删除失败")
            }
        })
    }
</script>
</html>